<template>
  <div class="container">
    <div class="tops">
      <div class="top">
        <div><img src="../assets/image/logo.png" alt="" style="width: 50px;height: 50px"></div>
        <div class="nav">
          <div :class="index===0?'nav-item-active':'nav-item'" @click="moveToTop('0')">项目首页</div>
          <div :class="index===1?'nav-item-active':'nav-item'" @click="moveToTop('1')">成果展示</div>
          <div :class="index===2?'nav-item-active':'nav-item'" @click="moveToTop('2')">特色优势</div>
          <div :class="index===3?'nav-item-active':'nav-item'" @click="moveToTop('3')">品牌建设</div>
          <div :class="index===4?'nav-item-active':'nav-item'" @click="moveToTop('4')">项目优势</div>
          <div :class="index===5?'nav-item-active':'nav-item'" @click="moveToTop('5')">核心团队</div>
          <div :class="index===6?'nav-item-active':'nav-item'" @click="moveToTop('6')">联系我们</div>
        </div>

      </div>
      <div style="height: 1280px">
        <!--        <div style="width: 100%;height: 100%">-->
        <!--          <div v-for="i in 1" :key="i">-->
        <!--            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsline="false" :options="playerOptions"></video-player>-->
        <!--            <p>{{'视频' + i}}</p>-->
        <!--          </div>-->
        <!--        </div>-->
        <div style="height: 700px"></div>
        <div style="display: flex;flex-direction: row;margin-left: 160px">
          <div style="width: 600px;border-radius: 30px">
            <common-video :video-data="d" :src="src"></common-video>
          </div>
          <div style="width: 350px;margin-left: 70px">
            <div style="font-size: 26px;font-weight: bold">关于我们</div>
            <div style="margin-top: 30px;line-height: 30px">
              武汉椒阳智慧农业科技有限公司是一家积极响应党中央乡村振兴，红安县委县政府能人回乡创业的号召，从而回乡创业扎根农村的企业。公司成立于2022年5月，是一家以种植、收购、花椒深加工及销售花椒衍生产品的现代化农贸企业。
            </div>
            <div
                style="text-align:center;font-size: 10px;border: black 2px solid;width:18%;height: 22px;line-height: 22px;border-radius: 10px;margin-top: 35px"
                @click="dialogVisible6=true">了解我们
            </div>
          </div>
        </div>
      </div>

      <div style="margin-left: 5%;width: 90%;background-color:rgba(255,255,255,0.75);border-radius: 50px">
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: -50px;margin-bottom: 50px">
          <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO31t-ABxzIAAAa3Yoniak014.png" alt="">
          <div style="font-size: 25px;font-weight: bold;margin-top: -72px;margin-left: -25px">成果展示</div>
        </div>

        <el-row :gutter="20">
          <el-col :span="6">
            <div class="el-col-item"><img
                style="width: 325px;height:200px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;"
                src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2iyiAZel-AAN1HKnwoi4781.png">
              <div class="el-col-item-text">
                <div style="margin-top: 10px">项目技术</div>
                <div>团队在有机肥制备和病虫害防治两大核心技术领域取得重要突破。</div>
                <div @click="dialogVisible1=true"
                     style="font-size: 10px;border: white 2px solid;width:30%;height: 22px;line-height: 22px;border-radius: 10px;margin-top: 15px;margin-left: 35%">
                  了解更多
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="el-col-item"><img
                style="width: 325px;height:200px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;"
                src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2jvyAIBSdABOSaJ9QcDM270.png">
              <div class="el-col-item-text">
                <div style="margin-top: 10px">振兴成果</div>
                <div> 椒阳红安被武汉市扶贫办确定为扶贫产业园，与政府共同推动脱贫攻坚战。</div>
                <div @click="dialogVisible2=true"
                     style="font-size: 10px;border: white 2px solid;width:30%;height: 22px;line-height: 22px;border-radius: 10px;margin-top: 15px;margin-left: 35%">
                  了解更多
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="el-col-item"><img
                style="width: 325px;height:200px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;"
                src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2jzGAFCJ9ABK_DqItEs0791.png">
              <div class="el-col-item-text">
                <div style="margin-top: 10px">工作认可
                </div>
                <div>公司受到七十多位重要领导调研指导,并给予我们高度肯定。</div>
                <div @click="dialogVisible3=true"
                     style="font-size: 10px;border: white 2px solid;width:30%;height: 22px;line-height: 22px;border-radius: 10px;margin-top: 15px;margin-left: 35%">
                  了解更多
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="el-col-item"><img
                style="width: 325px;height:200px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;"
                src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2j2yAbcfSABMUbdHNDKI186.png">
              <div class="el-col-item-text">
                <div style="margin-top: 10px">所获荣誉
                </div>

                <div>第二届湖北省“工友杯”职工创新创业十佳创新奖、优秀项目奖等。</div>
                <div @click="dialogVisible4=true"
                     style="font-size: 10px;border: white 2px solid;width:30%;height: 22px;line-height: 22px;border-radius: 10px;margin-top: 15px;margin-left: 35%">
                  了解更多
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="dowm">
        <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO31t-ABxzIAAAa3Yoniak014.png" alt="">
        <div style="font-size: 25px;font-weight: bold;margin-top: -62px;margin-left: -25px">特色优势</div>
        <div class="dowm-item">
          <img style="width: 650px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2osuAD1qVAAUn9EfJrLg810.png"
               alt="">
          <div style="display: flex;flex-direction: column;text-align: left;margin-left: 70px">
            <div style="font-weight: 550">战略合作打造特色品牌</div>
            <div style="font-weight: 550;margin-bottom: 20px">拓宽农副产品，深加工产业链</div>
            <div>
              团队利用花椒产业助推乡村振兴，以生态资源为基础，借助产业资源、田园风光和民居资源为基地保障;以文化元素为创新点,融入红色文化、地域文化、农耕文化,打造了一个以花椒产业为引擎、休闲旅游为特色，集产业建设、旅游吸引、美丽乡村、生态保护于一体的综合体。目前团队拥有高级园艺师8人，中级以上工程技术人员6人，培养花椒人才72人，与湖北农科院、武汉轻工业大学、西北林业大学、武汉理工大学等多家科研机构签订了战略合作协议,同时汇聚当地政府与湖北省多家企业的坚实力量,将自主研发与横向合作有机结合,力争打造以市场为导向的完整"产学研"体系，从管理到研发都走在同行业前列。
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="center">

    </div>

    <div class="advance">
      <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO31t-ABxzIAAAa3Yoniak014.png" alt="">
      <div style="font-size: 25px;font-weight: bold;margin-top: -75px;margin-left: 45.5%">品牌建设</div>
      <img style="width: 100%;height: 100%;margin-top: 30px"
           src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO32K2ASmzQAAFMIIeF9TI817.png" alt="">
      <div style="color: white;text-indent: 30px;margin-top: -240px;width: 60%;margin-left: 20%;font-size: 14px">
        公司致力于打造公司品牌形象，通过新媒体平台，公众号、抖音号、微信小程序等多方平台的构建，相互融合，并且将红色旅游业与公司品牌特色相结合，通过文化输出和品牌建设来构建公司品牌形象，让企业获得长久的独特的竞争力，提升公司的公信力，有利于招商加盟，提升合作伙伴和消费者的认知，同时也能够带来可持续的，超额的利润。
      </div>
      <div style="color: white;text-indent: 30px;width: 60%;margin-left: 20%;font-size: 14px">
        在包装上进行创新，将红色文化和当代潮流进行结合，创造出独具特色的品牌包装，明确产品信息，增加产品信息二维码,让消费者能够对产品知根知底，并且通过包装视觉效果吸引顾客，通过产品优质质量引导顾客购买。
      </div>
      <div @click="dialogVisible5=true"
           style="font-size: 10px;color:white;text-align:center;border: white 2px solid;width:5%;height: 22px;line-height: 22px;border-radius: 10px;margin-top: 55px;margin-left: 46%">
        了解更多
      </div>
    </div>
    <div class="youshi">
      <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO31t-ABxzIAAAa3Yoniak014.png" alt="">
      <div style="font-size: 25px;font-weight: bold;margin-top: -75px;margin-left: 45.5%">项目优势</div>
      <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO34NWAA2WnAAz2W7bv7ss903.png" alt=""
           style="width: 70%;margin-left: 15%;margin-top: 50px;opacity: 0.5;z-index: 1">
      <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO34BOAUsc0AAHDeErvw4w633.png" alt=""
           style="width: 54%;margin-left: 23%;margin-top: -621px;z-index: 2">
      <div style="width: 54%;margin-left: 23%;margin-top: 50px">
        公司以发展农业产业为抓手，采用五星发展模式，以“五角”双向共同发力形式全链条带动农村发展。于产业链上游，与高校研究院合作，借助矮化无刺红椒等领先种植技术进行生产基地建设与人才梯度建设。与对接农户利用PGS运营模式向其提供技术、资源与收入支持，建立多维度的利益联结和价值分享机制。在中游，利用标杆效应获取政府信任并与构建“乡村振兴”合作关系，借助政府力量扩大宣传力与影响力；与信誉良好的OEM代工厂联合研发推出花椒加工产品，增加产品附加值，提升价值链以合作共赢。到下游拓宽销售渠道，通过对各环节的管控，建立品牌优势，利用质量兴农、绿色兴农、品牌强农，助力农业实现高质高效
      </div>
    </div>
    <div class="people">
      <img src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO31t-ABxzIAAAa3Yoniak014.png" alt="">
      <div style="font-size: 25px;font-weight: bold;margin-top: -75px;margin-left: 45.5%">项目人员</div>
      <div style="display: flex;flex-direction: row;width: 46%;margin-left: 18%">
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: 100px">
          <img style="width: 150px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO35RaAICtFAAx_RMJOP1o389.png"
               alt="">
          <div style="background-color:#A9AAA9;color: white;height: 30px;line-height: 30px">穆钰莹</div>
        </div>
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: 50px;margin-left: 10px">
          <img style="width: 150px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO36kGAMhRjABed3_hgsAk370.jpg"
               alt="">
          <div style="background-color:#A9AAA9;color: white;height: 30px;line-height: 30px">贺子青</div>
        </div>
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: 100px;margin-left: 10px">
          <img style="width: 150px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO36neAD7YhAAHTXJldPR8924.jpg"
               alt="">
          <div style="background-color:#A9AAA9;color: white;height: 30px;line-height: 30px">黄京晶</div>
        </div>
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: 50px;margin-left: 10px">
          <img style="width: 150px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO36tSADIl9AAFFbOd95Gs333.jpg"
               alt="">
          <div style="background-color:#A9AAA9;color: white;height: 30px;line-height: 30px">李佳宇</div>
        </div>
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: 100px;margin-left: 10px">
          <img style="width: 150px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO36vmAErpIAB4xtXSPPs8387.png"
               alt="">
          <div style="background-color:#A9AAA9;color: white;height: 30px;line-height: 30px">贾思远</div>
        </div>
        <div style="display: flex;flex-direction: column;text-align: center;margin-top: 50px;margin-left: 10px">
          <img style="width: 150px" src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO360qAL12fAABIyaqgtsU991.jpg"
               alt="">
          <div style="background-color:#A9AAA9;color: white;height: 30px;line-height: 30px">陈红甜</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div>联系我们</div>
      <div style="margin-top: 10px">联系人:穆经理 | 联系电话:15085920729 | 邮箱:2637434678@qq.com</div>
      <div style="margin-top: 10px">公司名称:武汉椒阳智慧农业科技有限公司</div>
      <div style="margin-top: 10px">地址:湖北省武汉市武汉理工大学南湖校区</div>
    </div>
    <el-dialog
        title="项目技术"
        :visible.sync="dialogVisible1"
        width="30%">
      <span>
        <div>
          <img style="width: 460px;margin-left: -20px;margin-bottom: 20px;margin-top: -10px"
               src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2k9uAak2bAAWagJsCiAo205.png" alt="">
          <div style="text-indent: 30px">团队在有机肥制备和病虫害防治两大核心技术领域取得重要突破，并成功总结出标准化、流程化、数据化的花椒全寿命周期种植技术体系，涵盖7个关键步骤，共186个生产规范，制定了9本包含套袋、施肥等技术的椒树种植技术与质量管理手册。手册包含花椒管理养护全年时间表、气象判断标尺等内容同时实行花椒规模化种植、水肥一体化管理，根据花椒和土壤的需求精准补充微量元素和水分，然后统一采收、加工，利用最新的空气能低温风干技术，品质有充分保证，花椒麻味更高、香味更浓、颜色更鲜。</div>
        </div>
      </span>
    </el-dialog>
    <el-dialog
        title="振兴成果"
        :visible.sync="dialogVisible2"
        width="30%">
      <span>
        <div>
          <img style="width: 456px;margin-left: -20px;margin-bottom: 20px;margin-top: -10px"
               src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2jvyAIBSdABOSaJ9QcDM270.png" alt="">
          <div style="text-indent: 30px">
            椒阳红安已被武汉市扶贫办确定为扶贫产业园，与政府共同推动脱贫攻坚战，现已精准识别、定点帮扶当地58户农民，目前年累计用工2万余人次，后期将达5万人次。与附近10多个村签订协议，共同发展产业，投产后给村集体每年分红30万元，万亩花椒种植将带动约3000户农户增收。从知识教育、岗位援助等多方面帮助其切实脱贫致富，未来将以点带面，从思想上有效提升贫困户脱贫内生动力，实现真扶贫、扶真贫、真脱贫。
          </div>
           <div style="text-indent: 30px">
            同时与结对帮扶的二程镇王家冲村达成帮扶共识∶1、升级改造约600亩油茶基地,投入小见效快;2、通过本公司电商平台对外销售该村的香菇和莲子;3、部分低产板栗林申请改造种植花椒。
          </div>
        </div>
      </span>
    </el-dialog>
    <el-dialog
        title="工作认可"
        :visible.sync="dialogVisible3"
        width="30%">
      <span>
        <div>
          <img style="width: 460px;margin-left: -20px;margin-bottom: 20px;margin-top: -10px"
               src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2jzGAFCJ9ABK_DqItEs0791.png" alt="">
          <div style="text-indent: 30px">公司受到70多位重要领导调研指导，包括省委副书记，市工会主席等，给予我们工作高度肯定。
</div>
        </div>
      </span>
    </el-dialog>
    <el-dialog
        title="特色优势"
        :visible.sync="dialogVisible4"
        width="30%">
      <span>
        <div>
          <img style="width: 460px;margin-left: -20px;margin-bottom: 20px;margin-top: -10px"
               src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO2j2yAbcfSABMUbdHNDKI186.png" alt="">
          <div>  商务部信用认证企业</div>
              <div>第二届湖北省“工友杯"职工创新创业十佳创新奖、优秀项目奖武汉红安商会优秀会员企业</div>
              <div>优秀会员企业</div>
              <div>黄冈市五一劳动奖章等</div>
        </div>
      </span>
    </el-dialog>
    <el-dialog
        title="品牌建设"
        :visible.sync="dialogVisible5"
        width="30%">
      <span>
        <div>
          <img style="width: 455px;margin-left: -20px;margin-bottom: 20px;margin-top: -10px"
               src="https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO324-AcbKUAAdhzN7mmGs167.png" alt="">
          <div style="text-indent: 30px">
            公司致力于打造公司品牌形象，通过新媒体平台，公众号、抖音号、微信小程序等多方平台的构建，相互融合，并且将红色旅游业与公司品牌特色相结合，通过文化输出和品牌建设来构建公司品牌形象，让企业获得长久的独特的竞争力，提升公司的公信力，有利于招商加盟，提升合作伙伴和消费者的认知，同时也能够带来可持续的，超额的利润。
          </div>
          <div style="text-indent: 30px">在包装上进行创新，将红色文化和当代潮流进行结合，创造出独具特色的品牌包装，明确产品信息，增加产品信息二维码，让消费者能够对产品知根知底，并且通过包装视觉效果吸引顾客，通过产品优质质量引导顾客购买。
          </div>
        </div>
      </span>
    </el-dialog>
    <el-dialog
        title="关于我们"
        :visible.sync="dialogVisible6"
        width="30%">
      <span>
        <div>
          <div style="text-indent: 30px">
武汉椒阳智慧农业科技有限公司是一家积极响应党中央乡村振兴，红安县委县政府能人回乡创业的号召，从而回乡创业扎根农村的企业。公司成立于2022年5月，是一家以种植、收购、花椒深加工及销售花椒衍生产品的现代化农贸企业.
          </div>
          <div style="text-indent: 30px">目前已流转荒山荒地3000余亩，投资4000多万元，用于花椒的种植、收购、加工及销售。把基地做成标准和示范，下步发展农户规模化种植2至3万亩，并创立产品品牌，进行加工、销售和研发。干果通过国际、国内两种途径销售，加工产品通过电商和传统渠道进行销售。从种植、收购到加工、研发，再到销售，形成一二三产融合。致力于产业带动，帮助当地老百姓脱贫、致富、奔小康。
          </div>
           <div style="text-indent: 30px">根据国内外市场调查，花椒的应用日益广泛，不仅用于传统的调味品，在日化、保健、医药等方面也得到逐渐应用，市场需求量大，供给不足，每年的缺口在10至20万吨。公司目前的品种是经过几次改良的矮化无刺品种，便于采摘、产量高、品质好、收益期提前，由于红花椒的规模化种植在湖北是空白、且可供观赏和采摘，后期准备打造美丽乡村及田园综合体，发展旅游观光，投资将达10亿元，目前规划已完成。
          </div>
           <div style="text-indent: 30px">公司组建了经验丰富的专家及管理团队，并与多家科研院所签订了战略合作，打造完整的产、学、研发展体系。从管理到研发都走在同行业前列，努力把花椒标准化种植。公司目前常年可带动150户农民就业、年累计用工3万人次，后期将可带动300户以上农民就业，年累计用工达5万多人次。有信心和决心把当地的荒山变成绿水青山和老百姓的金山银山。
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import CommonVideo from "@/components/CommonVideo";
export default {
  name: "main",
  components: {
    videoPlayer,
    CommonVideo
  },
  data() {
    return {
      index: 0,
      d: {
        currentTime: 0, duration: 200
      },
      src: "http://119.44.11.185:81/2Q2W09936C5B3496B3E8F8FF4A85DBFD9C6AE91FF0EB_unknown_9C2CAD6BAFAD455E6AA089152DBAC7E789F89E05_3/dpv.videocc.net/243ba53fee/5/243ba53fee8d97f52a5970cddfe0cb95_2.mp4?pid=1673088245309X1422893" ,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "http://119.44.11.185:81/2Q2W09936C5B3496B3E8F8FF4A85DBFD9C6AE91FF0EB_unknown_9C2CAD6BAFAD455E6AA089152DBAC7E789F89E05_3/dpv.videocc.net/243ba53fee/5/243ba53fee8d97f52a5970cddfe0cb95_2.mp4?pid=1673088245309X1422893" // url地址
        }],
        poster: '', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },

  mounted() {
    window.addEventListener("scroll",this.handleScroll);
  },
  destroyed() {
    document.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    moveToTop(e){

      console.log(e)

      let top;
      if(e==='0'){
        this.index=0
        top=0
      }else if(e==='1'){
        this.index=1
        top=1160
      }
      else if(e==='2'){
        this.index=2
        top=1718
      }
      else if(e==='3'){
        this.index=3
        top=2201
      }else if(e==='4'){
        this.index=4
        top=2705
      }
      else if(e==='5'){
        this.index=5
        top=3509
      }
      else if(e==='6'){this.index=6
        top=3800
      }
      window.scrollTo({
        top:top
      })
    },
    handleScroll() {
//获取滚动时的高度
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop <=1160) {
        this.index = 0
      }else if (scrollTop <=1710) {
        this.index = 1
      }else if (scrollTop <=2200) {
        this.index = 2
      }else if (scrollTop <=2705) {
        this.index = 3
      }else if (scrollTop <=3200) {
        this.index = 4
      }else {
        this.index = 5
      }

    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 4250px;
  margin: 0;
  padding: 0;
}


.youshi {
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}

.people {
  display: flex;
  flex-direction: column;
  margin-top: 100px;
}

.bottom {
  height: 150px;
  background-color: #358733;
  color: white;
  padding-top: 20px;
  margin-top: 150px;
  text-align: center;
}

.dowm {
  text-align: center;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  width: 74%;
  margin-left: 13%;
}

.advance {
  text-align: left;
  width: 100%;
  display: flex;

  flex-direction: column;
}

.dowm-item {
  display: flex;
  flex-direction: row;
  margin-top: 50px;
}

.el-col-item {
  display: flex;
  flex-direction: column;
  background-color: #3F8D3D;
  border-radius: 25px;
  padding-bottom: 20px;
  color: white;
}

.el-col-item-text {
  text-align: center;
  width: 84%;
  height: 160px;
  line-height: 35px;
  margin-left: 8%;
  align-items: center;
  justify-content: center;

}

.nav {
  display: flex;
  flex-direction: row;
  height: 60px;
  align-items: center;
  justify-content: space-around;

}

.nav-item {
  height: 25px;
  align-items: center;
  text-align: center;
  line-height: 25px;
  padding: 5px;
  border-radius: 10px;
  margin-left: 20px;
}

.video-js .vjs-icon-placeholder {
  width: 80%;
  height: 80%;
  display: block;
}

.tops {
  background: url(https://www.cbing.icu:6060/group1/M00/00/01/CgAIBGO30B-AIUqPAFnRKW3oiD0309.png) no-repeat;
  height: 1550px;
  width: 100%;
  background-size: cover;
}

.top {
  position: fixed;
  background-color: rgba(241, 248, 241, 0.2);
  display: flex;
  z-index: 100;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}

.center {
  background-size: cover;
  height: 700px;
}

.nav-item-active {
  height: 25px;
  align-items: center;
  text-align: center;
  line-height: 25px;
  background-color: #00AE4F;
  padding: 5px;
  border-radius: 10px;
  margin-left: 20px;
}
</style>